<template>
  <div class="new-quotation-box">
    <div v-loading="fullscreenLoading">
      <ActionComponent v-if="response || !templateId"
                       :key="actionKey"
                       :header-show="headerShow"
                       :value="routerParameter"
                       :status="bargaStatus"
                       :template-id="bargaTemplateId"
                       @canceBarga="canceBarga"
                       @importData="importData"
                       @importLoading="importLoading"
                       @handerDiscussPrice="handerDiscussPrice" />
      <div v-else
           class="header-skeleton">
        <el-skeleton :rows="4"
                     animated />
      </div>
      <el-card class="box-card">
        <el-row>
          <el-col :span="2">
            <LeftBar :specs="rules"
                     @handerTab="handerTab" />
          </el-col>
          <el-col :span="22">
            <RightContent v-if="response || !templateId"
                          :key="contentKey"
                          ref="rightContent"
                          v-model="currentTabComponent"
                          :import-status="importStatus"
                          :barga-status="bargaStatus"
                          :value-object="valueObject"
                          :span-row="spanRow"
                          :response="response"
                          :specs="rules" />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import ActionComponent from './components/Action.vue'
import LeftBar from './components/LeftBar.vue'
import RightContent from './components/RightContent.vue'
// import quotationApi from "@/api/modules/quotation";
import { mapState, mapActions } from "vuex";
import eventBus from "@/libs/eventBus";

const TRANSPORT_PAGE = {
  '运费': 'TransportComponent',
  '提货费': 'CarryComponent',
  '送货费': 'DeliverComponent',
  '装货费': 'LoadComponent',
  // '送货费': 'DeliverComponent',
  '卸货费': 'UnloadComponent',
  '其它费用': 'OtherComponent'
}

const STATE_MAP = {
  11: false,
  14: false,
  8: true,
  0: true,
  1: false,
  3: true
}

export default {
  name: 'NewQuotation',
  components: { ActionComponent, LeftBar, RightContent },
  data () {
    return {
      currentTabComponent: 'TransportComponent',
      collection: {},
      discussPriceParameter: null,
      actionKey: 2,
      bargaTemplateId: '',
      handBargaStatus: null,
      contentKey: 0,
      fullscreenLoading: false,
      importStatus: false
    }
  },
  computed: {
    ...mapState({
      linkParams: (state) => state.link.linkParams,
      // quotation: (state) => state.quotation,
      detailData: (state) => state.quotation.detailData,
      response: (state) => state.quotation.response,
      whole: (state) => state.quotation.whole,
      pick: (state) => state.quotation.pick,
      deliver: (state) => state.quotation.deliver,
      load: (state) => state.quotation.load,
      unload: (state) => state.quotation.unload,
      other: (state) => state.quotation.other,
      divide: (state) => state.quotation.divide
    }),
    query () {
      return this.$route.query
    },
    templateId () {
      return this.query?.templateId
    },
    routerParameter () {
      return this.templateId ? this.detailData : this.linkParams
    },
    initState () {
      return !this.routerParameter?.status ? true : false
    },
    valueObject () {
      return STATE_MAP[this.routerParameter?.status] || this.initState
    },
    spanRow () {
      return this.valueObject ? 16 : 24
    },
    rules () {
      return {
        whole: this.whole,
        pick: this.pick,
        deliver: this.deliver,
        load: this.load,
        unload: this.unload,
        divide: this.divide,
        other: this.other,
        detailData: this.detailData
      }
    },
    headerShow () {
      return this.response || !this.templateId
    },
    bargaStatus () {
      return this.handBargaStatus || Number(this.query.status)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.detail({ templateId: this.query?.templateId || null, variable: false })
    })
    // this.init()
  },
  methods: {
    ...mapActions({
      detail: "quotation/detail",
      namedExport: "quotation/namedExport"
    }),
    handerTab (label) {
      this.currentTabComponent = TRANSPORT_PAGE[label]
    },
    handerDiscussPrice ({ templateId, status }) {
      this.handBargaStatus = status
      this.bargaTemplateId = templateId
      this.actionKey++
    },
    canceBarga () {
      eventBus.$emit("clearBargaData");
    },
    importLoading (value) {
      this.fullscreenLoading = value
    },
    checkArrayLength (obj) {
      for (let key in obj) {
        if (Array.isArray(obj[key]) && obj[key].length > 0) {
          return true;
        }
      }
      return false;
    },
    importData (value) {
      if (value) {
        this.fullscreenLoading = false
        const { rules, ...rest } = value

        const { detailData, ...exists } = this.rules // eslint-disable-line

        const isCheckArrayLength = this.checkArrayLength(exists)

        if (isCheckArrayLength) {
          this.importPrompt({ rules: rules, other: rest })
          return
        }
        this.rulesSetStore(rules, rest)
        this.importStatus = true
      }
    },
    importPrompt ({ rules, other }) {
      this.$confirm('已有运费信息是否清空导入?', '提示', {
        type: 'warning'
      }).then(() => {
        this.rulesSetStore(rules, other)
        this.importStatus = true
      })
    },
    rulesSetStore (rules, other) {
      this.namedExport({ rules: { ...rules, other: other }, variable: false })
    }
  }
}
</script>

<style scoped>
.header-skeleton >>> .el-skeleton__item {
  height: 8px;
}
.header-skeleton >>> .el-skeleton__first-line,
.el-skeleton__paragraph {
  /* height: 8px; */
  padding-top: 6px !important;
}
.header-skeleton >>> .el-skeleton__paragraph {
  padding: 0;
  margin: 0;
}
.header-skeleton {
  height: 72px;
  padding: 8px 20px 0 20px;
  background-color: var(--prev-bg-white);
}
.new-quotation-box {
  /* font-size: 14px !important; */
}
.box-card {
  height: calc(100vh - 150px);
  margin-top: 6px;
  overflow-y: auto;
}
</style>